<template>
  <div class="goods_topic">
    <div>
      <video-player v-if="playerOptions.sources[0].src"
        width="100%" webkit-playsinline x5-playsinline x5-video-player-fullscreen="true"
        class="video-player vjs-custom-skin" style="object-fit: fill;"
        ref="videoPlayer"
        :playsinline="playsinline"
        :options="playerOptions"
        @canplay="onPlayerCanplay($event)"
        @ended="onPlayerEnded($event)"
      ></video-player>
    </div>
    <div class="topic-detail" v-html="topic.content"></div>

    <div style="padding: 0 10px;">
      <van-row gutter="10" style="margin-left:0;margin-right:0;">
        <van-col
          span="12"
          class="card"
          v-for="(hotGood ,index) in topicGoods"
          :key="index"
        >
          <div
            style="box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;overflow:hidden;position:relative;background-color:#fff;"
          >
            <router-link :to="{ path: `/items/detail/${hotGood.id}`}">
              <div style="width:100%;height:0px;padding-bottom:100%;overflow:hidden;margin:0;">
                <img
                  v-lazy="hotGood.picUrl"
                  style="width:100%;background-color:#fff;"
                />
              </div>
            </router-link>
            <span class="goods_name">
              <img :src="factory_outlet_tag" height="14px" style="margin-bottom:-3px;" />
              {{hotGood.name}}
            </span>
            <div style="width:100%;height:45px;">
              <span class="goods_price" style="color:red;padding-left:6px;">￥{{hotGood.retailPrice}}</span>
              <span class="get_price">到手价</span>
              <br />
              <span class="couter_price">{{hotGood.counterPrice == 0?'':'￥'+hotGood.counterPrice}}</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { topicDetail, topicRelated } from '@/api/api';
import { Card, Row, Col } from 'vant';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import $ from 'jquery';

export default {
  props: {
    topicId: [String, Number]
  },
  data() {
    return {
      topic: {},
      topicGoods: [],
      topicRelated: [],
      factory_outlet_tag: factory_outlet_tag,
      playerOptions : {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: true, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4",
            src: ""
          }],
          poster: "", //你的封面地址
          // width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
      }
    };
  },

  created() {
    this.init();
  },

  computed: {
    playsinline() {
      let ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false
      } else {
        // ios端
        return true
      }
    }
  },

  methods: {
    init() {
      topicDetail({
        id: this.topicId
      }).then(res => {
        this.topic = res.data.data.topic;
        this.topicGoods = res.data.data.goods;
        this.playerOptions.poster = this.topic.videoPoster;
        this.playerOptions.sources[0].src = this.topic.videoUrl;
      });
      topicRelated({
        id: this.topicId
      }).then(res => {
        this.topicRelated = res.data.data;
      });
    },
    itemClick(id) {
      this.$router.push(`/items/detail/${id}`);
    },
    onPlayerCanplay (player) {
      var ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
      } else {
        // ios端
        $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
      }
    },
    onPlayerEnded(player) {
      this.playerOptions.sources[0].src = "";
      this.playerOptions.sources[0].src = this.topic.videoUrl;
    },
    closePlayer(){
      this.playerOptions.sources[0].src = "";
      this.playerOptions.sources[0].src = this.topic.videoUrl;
    },
  },

  components: {
    [Card.name]: Card,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>

<style lang="scss" scoped>
/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button{
  font-size: 2em;
  margin-top: 6.5em !important;
}

/deep/.vjs-fluid{
  padding-bottom: 43.75%;
}

/deep/.vjs-poster{
  background-size: 100% 100%;
}

/deep/.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
  font-size: 2.5em;  //播放按钮三角大小
}
//播放按钮绝对定位
/deep/.vjs-custom-skin>.video-js .vjs-big-play-button {
  top: 10%;
  left: 52.5%;
  height: auto;
  line-height: auto;
}

/deep/.video-js .vjs-big-play-button {
  font-size: 20px;
  line-height: 3em!important;
  height: 3em!important;
  width: 3em;
  opacity: 0.6;
  border-radius: 1.5em;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.goods_topic {
  .topic-detail {
    /deep/ p {
      padding: 0 10px;
      margin-block-start: 0 !important;
      margin-block-end: 0 !important;
    }
    /deep/ img {
      max-width: 100%;
      width: 100% !important;
      height: 100% !important;
      display: block;
    }
  }
}
  .card:nth-child(odd){
    padding:6px 6px 6px 0px !important;
  }
  .card:nth-child(even){
    padding:6px 0px 6px 6px !important;
  }

.goods_name {
  padding-left: 6px;
  font-size: 13px;
  height: 25px;
  line-height: 30px;
  font-weight: bold;
  font-family: Arial;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  position: relative;
  color: #323233;
}
.goods_price {
  font-weight: bold;
  padding-left: 6px;
  display: inline-block;
  color: #000;
  height: 14px;
  line-height: 14px;
  text-align: left;
}
.get_price{
  color:red;
  padding:0 4px;
  border:0.2px solid red;
  border-radius:3px;
  font-size:10px;
  display:inline-block;
  margin-left:4px;
  transform: scale(0.8);
  transform-origin: -10px -3px;
}
.couter_price{
  display:inline-block;
  font-size:12px;
  color:#8E8E8E;
  transform: scale(0.8);
  transform-origin: 10px -25px;
  padding-left:8px;
  text-decoration: line-through;
}
</style>